$(function(){
	
	// 设置页面布局
	var H = $(window).height();
	H = H - 44 -50;
	$(".menu-list").css("height",H)
	$(".menu-box").css("height",H)
	
	// 页面进来第一次请求导航
	ajax("/menu.php","post",{},"json",function(data){
		var str = "";
		var mydata =data.data;
		for (var i = 0; i < mydata.length; i++) {
			mydata[i]
			if(i==0){
				str+='<li class="active"><a href="#'+mydata[i].id+'">'+mydata[i].name+'</a></li>'
			}else{
				str+='<li><a href="#'+mydata[i].id+'">'+mydata[i].name+'</a></li>'
			}
		}																		
		$(".menu-list ul").empty();
		$(".menu-list ul").append(str);
		// 获取第一个的分类ID
		var classID = $(".menu-list ul li").eq(0).find("a").attr("href");
		getGood(classID); // 获取右边
		tabClick(); // 给菜单绑定事件
	},function(err){
		console.log(err);
	})
	// 请求右侧的数据
	function getGood(classID){
		classID = classID.substring(1);
		console.log(classID)
		// 获取列表数据
		ajax("/list.php","post",{classID:classID},"json",function(data){
			var str = '<div class="menu-inner" id='+classID+'>';
			str += '<a href="list.html?classID='+classID+'"><img class="menu-img" src="img/catgory.jpg" alt="" /></a>';
			str +='<ul>';
			var mydata = data.data;
			for (var i = 0; i < mydata.length; i++) {
				str+='<li><a href="detail.html?classID='+classID+'&goodID='+mydata[i].id+'"><img src="'+mydata[i].img+'" alt="" /></a></li>';
			}
			str+="</ul></div>";
			$(".menu-box").append(str);
		},function(err){
			console.log(err);
		})
	}

	// 左侧菜单点击切换
	function tabClick(){
		$(".menu-list ul li").click(function(){
			if($(this).hasClass("active")){
				return false;
			}else{
				$(this).addClass("active").siblings().removeClass("active");
				var id = $(this).find("a").attr("href");
				
				if(!$(id).html()){  // 这个节点不存的时候
					getGood(id); // 获取商品
				}
				$(".menu-inner").hide();
				$(id).show()
			}
		})
	}




})
